<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div align="center">
    <span>邮箱: <input id="emails" type="text"></span></br><br>
    <span>密码: <input id="passwords" type="text"></span><br><br>
    <input type="button" value="登录" id="logins"> <br><br>
    <a href="/register.html">注册账户</a>
</div>
</body>
<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#logins').onclick = function () {
        // 发送ajax 请求 需要 五步
        var emails = document.getElementById("emails").value;

        var password = document.getElementById("passwords").value;
        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。

        var urls = "http://localhost:9002/api/user/" + email + "/" + password
        ajaxObj.open('get', urls);
        ajaxObj.setRequestHeader("dataType", "JSONP");

        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);
                if ("true" == ajaxObj.responseText) {
                    var token = document.cookie.match(new RegExp("(^| )" + token + "=([^;]*)(;|$)"));
                    if (null == token) {
                        alert("获取token失败")
                    }
                    alert("获取token" + token)
                    var Days = 30; //此 cookie 将被保存 30 天
                    var exp = new Date();    //new Date("December 31, 9998");
                    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
                    document.cookie = token + "=" + escape(token) + ";expires=" + exp.toGMTString();
                    location.href = "http://localhost:8080/static/welcom.html";
                } else {
                    alert(ajaxObj.responseText);
                }
            }
        }
    }
</script>
</html>